<template>
	<view class="path">
		<view class="path-list" v-for="(item,index) in list" :key="index" @click="goModifyPath(index)">
			<view class="path-item" @click="goConfirmOrder(item)">
				<view class="path-main">
					<view class="path-name">{{item.name}}</view>
					<view class="path-phone">{{item.phone}}</view>
				</view>
				<view class="path-main">
					<view class="defalut-icon" v-if="item.isDefault">默认</view>
					<view class="path-address">{{item.city}} {{item.address}}</view>
				</view>
			</view>
		</view>
		<view class="add-path">
			<view class="add-path-btn" @click="goAddPath">新增地址</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				// 是否从订单页过来的状态值
				isFromConfirmOrder:false,
			}
		},
		onLoad(e) {
			// 判断是否从确认订单页过来的
			if (e.type == 'selectPath') {
				// console.log('我是从确认订单过来的');
				this.isFromConfirmOrder = true;
			}
		},
		computed:{
			...mapState({
				list:state=>state.path.list
			})
		},
		methods: {
			// 跳转至新增地址页
			goAddPath(){
				uni.navigateTo({
					url:'/pages/config-addPath/config-addPath'
				})
			},
			// 跳转至修改地址页
			goModifyPath(index){
				let pathObj = JSON.stringify({
					index:index,
					item:this.list[index]
				})
				uni.navigateTo({
					url:'/pages/config-addPath/config-addPath?data='+pathObj+''
				})
			},
			// 返回确认订单页
			goConfirmOrder(item){
				// 如果是从确认订单页过来的的则执行以下代码
				if (this.isFromConfirmOrder) {
					// uni.$emit(eventName,OBJECT)   触发全局的自定义事件，附加参数都会传给监听器回调函数。
					uni.$emit('selectPathItem',item);
					// 返回上一页
					uni.navigateBack({
						delta:1
					})
				}
			}
		}
	}
</script>

<style scoped>
	.path-list {
		padding:0 20rpx;
	}
	.path-item{
		padding: 10rpx;
		border-bottom: 2rpx solid #cccccc;
	}
	.path-main{
		display: flex;
		align-items: center;
	}
	.path-name{
		padding-right: 10rpx;
	}
	.defalut-icon{
		text-align: center;
		padding-right: 10rpx;
		background-color: #49BDFB;
		color: white;
		border-radius: 10rpx;
		font-size: 20rpx;
	}
	.add-path {
		padding-top: 20rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.add-path-btn {
		border: 2rpx solid #49BDFB;
		color: #49BDFB;
		border-radius: 30rpx;
		padding: 6rpx 30rpx;
	}
</style>
